<template>
  <div class="Auditing_box">
    <!-- <div class="Auditing_top"> -->
    <!-- <el-form :inline="true" :model="formInline" style="width: 100%" class="demo-form-inline"> -->
    <!-- <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>-->
    <!-- <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
    </el-form-item>-->
    <!-- <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>-->
    <!-- </el-form> -->
    <!-- </div> -->
    <el-button type="primary" :loading="loading_status" @click="refresh_data">刷新</el-button>
    <div class="Auditing_footer">
      <el-table :data="listdata.slice((page - 1) * limit, page * limit)" style="width: 100%">
        <el-table-column prop="userId" label="用户id" width="150"></el-table-column>
        <el-table-column prop="username" label="用户名" width="120"></el-table-column>
        <el-table-column prop="phone" label="电话号码" width="170"></el-table-column>
        <el-table-column prop="schoolId" label="学校" width="150"></el-table-column>

        <el-table-column prop="createdAt" label="申请时间" width="200"></el-table-column>
        <!-- <el-table-column prop="city" label="市区" width="120"></el-table-column> -->
        <!-- <el-table-column prop="address" label="地址" width="300"></el-table-column> -->
        <!-- <el-table-column prop="zip" label="邮编" width="120"></el-table-column> -->
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <div>
              <el-radio-group v-model="scope.row.status" size="medium">
                <!-- <el-radio-group v-model="scope.row.status" @change="handleClick(scope.row)" size="medium"> -->
                <el-radio-button
                  label="pending"
                  @click.native="handleClick(scope.row.userId,'pending')"
                >待定</el-radio-button>
                <el-radio-button
                  label="approved"
                  @click.native="handleClick(scope.row.userId,'approved')"
                >通过</el-radio-button>
                <el-radio-button
                  label="rejected"
                  @click.native="handleClick(scope.row.userId,'rejected')"
                >拒绝</el-radio-button>
                <el-radio-button
                  label="delete"
                  @click.native="handleClick(scope.row.userId,'delete')"
                >删除</el-radio-button>
              </el-radio-group>
            </div>&nbsp;
            &nbsp;
            <!-- <el-button @click="handleClick(scope.row)">通过</el-button> -->
            <!-- <el-button>否决</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :currentPage="page"
        :page-size="limit"
        :page-sizes="[5, 10]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="TableDatatoal"
        @size-change="handleSizeChange"
        @current-change="CurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

  <script>
import { getUserList, setUserApprove } from "@/api/login.js"; //引入
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      loading_status: false,
      radio: "pending",
      isShow: false,
      limit: 5,
      page: 1,
      listdata: []
    };
  },
  computed: {
    TableDatatoal() {
      return this.listdata.length;
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClick(row, value) {
      const myObj = {};
      myObj.userId = row;
      myObj.status = value;
      console.log(myObj);
      setUserApprove(myObj).then(res => {
        console.log(res);
        this.getdata();
      });
      console.log(row, value);
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    CurrentChange(val) {
      this.page = val;
    },
    //     TableDatatoal =  {
    //   // 该函数的返回值就是计算属性的值
    //   return list.listdata.length;
    // }
    refresh_data() {
      this.loading_status = true;
      // 延时
      setTimeout(() => {
        // console.log("你好");
        this.loading_status = false;
        this.$message({
          message: "刷新信息成功",
          type: "success"
        });
        this.getdata();
      }, 2000);
    },
    async getdata() {
      console.log("kdsf");
      await getUserList().then(res => {
        // console.log(res);
        let { data } = res;
        // console.log(data);
        this.listdata = data;
        console.log(this.listdata);
      });
    }
  },
  mounted() {
    this.getdata();
  }
};
</script>

<style scoped>
.Auditing_box {
  padding: 20px;
  width: 100%;
}
</style>